<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>概览</title>
</head>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/highchart/data.js}"></script>
<script th:src="@{/js/highchart/highcharts.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<style>
    a{
        cursor: pointer;
    }
</style>
<body>
<div class="row" style="margin: 1% 3% 1% 3%">
    <div class="col-sm-12">
        <div name="概览主图" id="container1"></div>
    </div>
    <div class="col-sm-12">
        <div name="过期合同" style="margin-top: 5%;margin-bottom: 5%">
            <div id="container2" class="col-sm-5" style="float: left"></div>
            <div class="col-sm-5" style="margin-left: 10%">
                <div hidden="hidden" name="隐藏标引">
                    <input id="htPage" value="1" />
                    <input id="htTotalPage" value="1" />
                    <input id="htdba" value="" />
                    <input id="htdc" value="" />
                    <div id="htGo">
                    </div>
                </div>
                <table class="table table-hover table-striped table-bordered">
                    <thead>
                    <tr>
                        <th style="text-align: center">合同类型</th>
                        <th style="text-align: center">合同名称</th>
                        <th style="text-align: center">过期时间</th>
                    </tr>
                    </thead>
                    <tbody id="hts">
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="height: 30px"></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
                <ul id="htpagenumber" class="pager">
                    <li ><a href="#">&larr; 上一页</a></li>
                    <li ><a href="#">下一页 &rarr;</a></li>
                </ul>
            </div>
        </div>
        <div name="销售凭证年份归档" style="margin-top: 5%">
            <div id="container3"></div>
            <dic></dic>
        </div>
    </div>
    <div class="col-sm-12" style="margin-top: 5%;text-align: center">技术所有:杭州麦达@<a href="http://www.metadata.com.cn/">http://www.metadata.com.cn/</a></div>
</div>

</body>
<!--概览主图-->
<script language="JavaScript">
    //概览主图
    $(document).ready(function () {
        $.ajax({
            url: "/editor/manager",
            dataType: "json",
            type: "GET",
            success: function (data) {
                var chart = {
                    type: 'column'
                };
                var title = {
                    text: '各表数据统计',
                    style:
                        {
                            fontSize: '18px',
                            fontWeight: 'bolder'
                        }
                };
                var subtitle = {
                    text: 'Total Manager'
                };
                var xAxis = {
                    categories: data[0],
                    crosshair: true
                };
                var yAxis = {
                    min: 0,
                    allowDecimals: false,
                    title: {
                        text: '总数据量 (条)'
                    }
                };
                var tooltip = {
                    headerFormat: '<span style="font-size:10px"></span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0;font-size: 14px">{point.category}: </td>' +
                    '<td style="padding:0"><b>{point.y} 条数据</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                };
                var plotOptions = {
                    column: {
                        //间隔宽度
                        pointPadding: 0,
                        borderWidth: 0
                    },
                    series: {
                        events: {
                            click: function () {

                            }
                        }
                    }
                };
                var credits = {
                    enabled: false
                };

                var series = [{
                    name: '总概览柱形图',
                    data: data[1]
                }];

                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.tooltip = tooltip;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.series = series;
                json.plotOptions = plotOptions;
                json.credits = credits;
                $('#container1').highcharts(json);
            }
        })
    });
</script>
<!--过期合同柱形图-->
<script>
    $(document).ready(function () {
        $.ajax({
            url: "/editor/htCount",
            dataType: "json",
            type: "GET",
            success: function (data) {
                var chart = {
                    type: 'column'
                };
                var title = {
                    text: '过期合同统计',
                    style:
                        {
                            fontSize: '18px',
                            fontWeight: 'bolder'
                        }
                };
                var subtitle = {
                    text: 'OutTime Manager'
                };
                var xAxis = {
                    categories: data[0],
                    crosshair: true
                };
                var yAxis = {
                    min: 0,
                    allowDecimals: false,
                    title: {
                        text: '过期合同总数'
                    }
                };
                var tooltip = {
                    headerFormat: '<span style="font-size:10px"></span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0;font-size: 14px">{point.category}: </td>' +
                    '<td style="padding:0"><b>{point.y} 条数据</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                };
                var plotOptions = {
                    column: {
                        //间隔宽度
                        pointPadding: 0,
                        borderWidth: 0
                    },
                    series: {
                        events: {
                            click: function (e) {
                                var dc=e.point.category;
                                $("#htPage").val("1");
                                var page=$("#htPage").val();
                                var dba="";
                                switch (dc){
                                    case "客户合同" :
                                        dba="khht";
                                        break;
                                    case "供应商合同" :
                                        dba="gysht";
                                        break;
                                    case "其他合同" :
                                        dba="qtht";
                                        break;
                                };
                                $("#htdba").val(dba);
                                $("#htdc").val(dc);
                                htPagesearch(dba,dc,page)
                            }
                        }
                    }
                };
                var credits = {
                    enabled: false
                };

                var series = [{
                    name: '过期合同柱形图',
                    data: data[1]
                }];

                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.tooltip = tooltip;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.series = series;
                json.plotOptions = plotOptions;
                json.credits = credits;
                $('#container2').highcharts(json);
            }
        })
    });
</script>
<!--过期合同搜索-->
<script>
    function htPagesearch(dba,dc,page) {
        $.ajax({
            url: "/editor/htPageSearch",
            datatype: "json",
            type: "POST",
            data: {
                page: page,
                dc: dba
            },
            success: function (data) {
                if (data!=null){
                    $("#hts").html("");
                    var x=0;
                    for (var i=0;i<data.length;i++){
                        if (i==(data.length-1)){
                            $("#htTotalPage").val((Math.ceil(data[i]/10)))
                        }else {
                            var value=data[i];
                            var values = value.split("@@@");
                            $("#hts").append('<tr style="height: 30px;text-align: center" id="'+values[0]+'" title="'+dc+'" onclick="searchHt(this.id,this.title)"><td>'+dc+'</td><td>'+values[2]+'</td><td>'+values[1]+'</td></tr>');
                            x++;
                        }
                    }
                    for (x;x<10;x++){
                        $("#hts").append('<tr style="height: 37px;text-align: center"><td></td><td></td><td></td></tr>');
                    }
                    //分页
                    var totalpage=$("#htTotalPage").val();
                    $("#htpagenumber").html("")
                    $("#htpagenumber").append('<li ><a onclick="htGetPage(1)">&larr; 上一页</a></li>');
                    if (totalpage<6){
                        for (var j = 0; j < totalpage; j++) {
                            var x=j+1;
                            if (x==page){
                                $("#htpagenumber").append('<li><a style="background-color: skyblue" onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                            } else{
                                $("#htpagenumber").append('<li><a onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                            }
                        }
                    }
                    if (totalpage>5) {
                        if (page == 1) {
                            for (var j = 0; j < 6; j++) {
                                var x = j + 1;
                                if (x == page) {
                                    $("#htpagenumber").append('<li><a style="background-color: skyblue" onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                                } else {
                                    $("#htpagenumber").append('<li><a onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                                }
                            }
                        } else {
                            var gap = totalpage - page;
                            if (gap == 0) {
                                for (var j = 5; j > -1; j--) {
                                    var x = page - j;
                                    if (x == page) {
                                        $("#htpagenumber").append('<li><a style="background-color: skyblue" onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                                    } else {
                                        $("#htpagenumber").append('<li><a onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                                    }
                                }
                            } else if (gap == 1) {
                                for (var j = 4; j > -2; j--) {
                                    var x = page - j;
                                    if (x == page) {
                                        $("#htpagenumber").append('<li><a style="background-color: skyblue" onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                                    } else {
                                        $("#htpagenumber").append('<li><a onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                                    }
                                }
                            } else if (gap > 1) {
                                for (var j = 3; j > -3; j--) {
                                    var x = page - j;
                                    if (x == page) {
                                        $("#htpagenumber").append('<li><a style="background-color: skyblue" onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                                    } else {
                                        if (x > 0) {
                                            $("#htpagenumber").append('<li><a onclick="htGetPage(this.title)" title="' + x + '">' + x + '</a></li>')
                                        }
                                    }
                                }
                                var m = page - 3;
                                if (m == -1) {
                                    $("#htpagenumber").append('<li><a onclick="htGetPage(this.title)" title="' + 5 + '">' + 5 + '</a></li>')
                                    $("#htpagenumber").append('<li><a onclick="htGetPage(this.title)" title="' + 6 + '">' + 6 + '</a></li>')
                                } else if (m == 0) {
                                    $("#htpagenumber").append('<li><a onclick="htGetPage(this.title)" title="' + 6 + '">' + 6 + '</a></li>')
                                }
                            }
                        }
                    }
                    $("#htpagenumber").append('<li ><a onclick="htGetPage(1)">下一页 &rarr;</a></li>');
                }
            }
        })
    }
    //分页搜索
    function htGetPage(page) {
        var dba = $("#htdba").val();
        var dc=$("#htdc").val();
        $("#htPage").val(page);
        htPagesearch(dba,dc,page);
    }
</script>
<!--过期合同详细-->
<script>
    function searchHt(id,dc) {
        $.ajax({
            url: "/editor/dbidGet",
            datatype: "json",
            type: "POST",
            data: {
                dc: dc
            },
            success: function (dbid) {
                var url="/editor/zlupdate/"+dbid+"/"+id+"/1";
                window.location.href=url
            }
        })
    }
</script>
<!--销售凭证年份归档-->
<script>

</script>
</html>